<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>数据展示</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/index1.css" />
		<!--<link rel="stylesheet" media="" href="css/group-mobile.css" />-->
	</head>

	<body>
		<div class="frame">
			<div class="header">
				<div class="header-cont">
					<p>拓必拓大数据</p>
				</div>
			</div>
			<div class="content">
				<div class="cont">
					<div class="back"></div>
					<div class="nav">
						<div class="nav-list">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="img">
								<img src="" alt="" />
							</div>
							<p>分公司数据统计</p>
						</div>
						<div class="nav-list">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="img">
								<img src="" alt="" />
							</div>
							<p>点检统计</p>
						</div>
						<div class="nav-list">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="img">
								<img src="" alt="" />
							</div>
							<p>缺陷管理统计</p>
						</div>
						<div class="nav-list">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="img">
								<img src="" alt="" />
							</div>
							<p>两票及定期工作</p>
						</div>
						<!--<div class="nav-list">
						<div class="img">
							<img src="" alt="" />
						</div>
						<p>定期工作统计</p>
					</div>
					<div class="nav-list">
						<div class="img">
							<img src="" alt="" />
						</div>
						<p>缺陷管理统计</p>
					</div>-->

						<!--<div class="nav-list"></div>
					<div class="nav-list"></div>
					<div class="nav-list"></div>
					<div class="nav-list"></div>
					<div class="nav-list"></div>-->
					</div>
					<div class="left">
						<div class="ranking">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="title">
								<p class="title-h">统计排行</p>
								<div class="more">
									<p>MORE+</p>
								</div>
							</div>
							<div class="ranking-key">
								<div class="key DJ key-active">
									<div class="keyBtn">
										<div class="keyBtn-cont"></div>
										<div class="key-mask">
											<div class="key-mask-cont"></div>
										</div>
									</div>
									<p>点检</p>
								</div>
								<div class="key GZP">
									<div class="keyBtn">
										<div class="keyBtn-cont"></div>
										<div class="key-mask">
											<div class="key-mask-cont"></div>
										</div>
									</div>
									<p>工作票</p>
								</div>
								<div class="key CZP">
									<div class="keyBtn">
										<div class="keyBtn-cont"></div>
										<div class="key-mask">
											<div class="key-mask-cont"></div>
										</div>
									</div>
									<p>操作票</p>
								</div>
								<div class="key QX">
									<div class="keyBtn">
										<div class="keyBtn-cont"></div>
										<div class="key-mask">
											<div class="key-mask-cont"></div>
										</div>
									</div>
									<p>缺陷</p>
								</div>
								<div class="key DQGZ">
									<div class="keyBtn">
										<div class="keyBtn-cont"></div>
										<div class="key-mask">
											<div class="key-mask-cont"></div>
										</div>
									</div>
									<p>定期工作</p>
								</div>
							</div>
							<div class="ranking-chart" id="ranking-chart">
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
								<div class="rank-list">
									<p class="rank-list-name"></p>
									<div class="rank-list-border">
										<div class="rank-list-bar">
											<span class="rank-list-num"></span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="fault">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="title">
								<p class="title-h">缺陷统计</p>
								<div class="more">
									<p>MORE+</p>
								</div>
							</div>
							<div class="QXchart-box">
								<!--<div class="QXchart-pie">
								<div id="QXPieChart"></div>
							</div>
							<div class="QXchart-bar">
								<div id="QXBarChart"></div>
							</div>-->
								<div class="QXbox mobile swiper-container">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<div class="BQchart QXchart"></div>
											<div class="XQchart QXchart"></div>
										</div>
										<div class="swiper-slide">
											<div class="YQchart QXchart"></div>
											<div class="finished QXchart"></div>
										</div>

									</div>
									<!-- Add Pagination -->
									<!--<div class="swiper-pagination"></div>-->
								</div>
								<div class="QXbox PC">
									<div class="BQchart QXchart"></div>
									<div class="XQchart QXchart"></div>
									<div class="YQchart QXchart"></div>
									<div class="finished QXchart"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="map">
						<div class="day">
							<p>安全生产</p>
							<div class="num">
								101 <span>天</span>
							</div>
						</div>
						<div id="map"></div>
						<div class="mask">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="title">
								<p class="title-h">分公司报警</p>
								<div class="more">
									<p>MORE+</p>
								</div>
							</div>
							<div class="alarm-cont">
								<p>请到地图选择分公司公司</p>
								<p>点检报警数：<span></span></p>
								<p>工作票报警数：<span></span></p>
								<p>操作票报警数：<span></span></p>
								<p>缺陷管理报警数：<span></span></p>
								<p>定期工作报警数：<span></span></p>
							</div>
						</div>
					</div>
					<div class="point-inspection">
						<span class="border border-top-left"></span>
						<span class="border border-top-rigth"></span>
						<span class="border border-bottom-left"></span>
						<span class="border border-bottom-right"></span>
						<div class="title">
							<p class="title-h">两票及定期工作</p>
							<div class="more">
								<p>MORE+</p>
							</div>
						</div>
						<div class="set">
							<div class="swiper-container swiper-container-horizontal">
								<div class="swiper-wrapper">
									<div class="swiper-slide set-charts" id="GZPchart">
										<!--<div class="pie" id="GZPPie"></div>
										<div class="bar" id="GZPBar"></div>-->
									</div>
									<div class="swiper-slide">
										<div class="pie" id="CZPPie"></div>
										<div class="bar" id="CZPBar"></div>
									</div>
									<div class="swiper-slide">
										<div class="pie" id="DQGZpie"></div>
										<div class="bar" id="DQGZbar"></div>
									</div>
								</div>

							</div>
							<div class="swiper-pagination"></div>
						</div>
					</div>
					<div class="last">
						<div class="alarm">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="title">
								<p class="title-h">分公司报警</p>
								<div class="more">
									<p>MORE+</p>
								</div>
							</div>
							<div class="alarm-cont">
								<p>请到地图选择分公司公司</p>
								<p>点检报警数：<span></span></p>
								<p>工作票报警数：<span></span></p>
								<p>操作票报警数：<span></span></p>
								<p>缺陷管理报警数：<span></span></p>
								<p>定期工作报警数：<span></span></p>
							</div>
						</div>
						<div class="alarm-set">
							<span class="border border-top-left"></span>
							<span class="border border-top-rigth"></span>
							<span class="border border-bottom-left"></span>
							<span class="border border-bottom-right"></span>
							<div class="title">
								<p class="title-h">点检统计</p>
								<div class="more">
									<p>MORE+</p>
								</div>
							</div>
							<div id="DJchart"></div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/echarts.min.js"></script>
	<script src="js/echarts-liquidfill.min.js"></script>
	<script src="js/china.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/group1.js"></script>
	<script src="js/ranking.js"></script>
	<script src="js/DJpie.js"></script>
	<script src="js/QXGLchart.js"></script>
	<script src="js/set.js"></script>
	<script src="js/click.js"></script>

</html>